<template>
  <div>
    <h1>list 组件 学习编程式导航</h1>

    <ul>
      <li v-for="item in lists" :key="item.id" @click="goNews(item.id)">
        {{ item.title }}------------{{ item.id }}
      </li>
    </ul>
  </div>
</template>

<script>


let  arrList=[
    
    {title:'5G商用在即，三大运营商营收持续下降',id:1},
      {title:'国际媒体头条速览：特朗普宣布杀死巴格达迪时，有人想起了奥巴马',id:2}


]
export default {
  data() {
    return {
      lists: [],
    };
  },
  methods: {
    getList() {
      fetch("http://www.liulongbin.top:3006/api/news")
        .then((res) => res.json())
        .then((result) => {
          console.log(result);
          this.lists = result.data;
        });
    },

    goNews(id) {
      console.log(id);
    //   方式一  啥都不带
    //    this.$router.push('path路径')
    // //    方式二 path  写成对象的形式 携带参数
    //   this.$router.push({ptah:'路径', query:{}})
    //   //方式三 
    //    this.$router.push({name:'路由的name名字', params:{}})


    //    this.$router.push('/news')

    // this.$router.push({path:'/news', query:{age:19,id}})

    this.$router.push({name:'newsaaa', params:{id, name:'张三'}})
     
    },
  },
   created() {
    // this.getList();
    this.lists=arrList
  },
};
</script>

<style  scoped>
li {
  list-style: none;
  height: 40px;
  border: 1px solid red;
  margin: 5px 0;
}
</style>
